<template>
  <view :class="['custom-card', { 'bg-#ffffff': showBg }]">
    <view :class="{ 'title': true, 'title-bt': isShowBt }">
      <text class="text-#1C213E text-32rpx font-bold mb-24rpx">{{ title }}</text>
      <text v-if="showCount && itemCount > 0" class="text-#727687 text-28rpx fw-400 ml-16rpx">共{{ itemCount }}项</text>
    </view>
    <slot></slot>
  </view>
</template>

<script name="customCard" setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  isShowBt: {
    type: Boolean,
    default: true
  },
  showCount: {
    type: Boolean,
    default: false
  },
  itemCount: {
    type: Number,
    default: 0
  },
  showBg: {
    type: Boolean,
    default: true
  }
});
</script>

<style lang="scss" scoped>
.custom-card {
  margin-bottom: 24rpx;
  border-radius: 4px 4px 4px 4px;
  padding: 32rpx 32rpx 40rpx;
  .title {
  }
  .title-bt {
    border-bottom: 1rpx solid #e6e6e6;
    padding: 0 0 32rpx;
  }
}
</style>
